import { RouteRecordRaw, viewDepthKey } from "vue-router";
import RouterTransition from "@vue-ant-plus/components/router-transition";
import { shallowRef } from "vue";
const asyncRoutes: Array<RouteRecordRaw> = [
  {
    path: "home",
    name: "home",
    component: () => import("@/views/components/home.vue"),
    meta: {
      title: "首页",
      icon: "icon_missionary_work",
    },
  },
  {
    path: "components",
    name: "components",
    redirect: "/components/modal",
    meta: {
      title: "通用组件",
      icon: "icon_missionary_work",
    },
    component: shallowRef(RouterTransition),
    children: [
      // {
      //   path: "test",
      //   component: () => import("@/views/components/index.vue"),
      //   name: "test",
      //   meta: {
      //     title: "测试",
      //     root: true,
      //   },
      // },
      {
        path: "flow",
        component: () => import("@/views/components/flow.vue"),
        name: "flow",
        meta: {
          title: "流程图",
          root: true,
        },
      },
      {
        path: "tinymce",
        component: () => import("@/views/components/tinymce.vue"),
        name: "tinymce",
        meta: {
          title: "富文本编辑器",
          root: true,
        },
      },
      {
        path: "modal",
        component: () => import("@/views/components/modal.vue"),
        name: "modal",
        meta: {
          title: "弹窗",
          root: true,
        },
      },
      {
        path: "codemirror",
        component: () => import("@/views/components/codemirror.vue"),
        name: "codemirror",
        meta: {
          title: "代码编辑",
          root: true,
        },
      },
      {
        path: "colorpicker",
        component: () => import("@/views/components/colorpicker.vue"),
        name: "colorpicker",
        meta: {
          title: "颜色选择器",
          root: true,
        },
      },
      {
        path: "mark",
        component: () => import("@/views/components/mark.vue"),
        name: "mark",
        meta: {
          title: "标注",
          root: true,
        },
      },
      {
        path: "verify-code",
        component: () => import("@/views/components/verify-code.vue"),
        name: "verifyCode",
        meta: {
          title: "验证码",
          root: true,
        },
      },
    ],
  },
  {
    path: "forms",
    name: "forms",
    redirect: "/forms",
    meta: {
      title: "表单页",
      icon: "icon_missionary_work",
    },
    component: shallowRef(RouterTransition),
    children: [
      {
        path: "forms",
        component: () => import("@/views/components/forms/schema-form.vue"),
        name: "schemaForm",
        meta: {
          title: "基础表单",
          root: true,
        },
      },
      {
        path: "panel-form",
        component: () => import("@/views/components/forms/panel-form.vue"),
        name: "panelForm",
        meta: {
          title: "问卷表单",
          root: true,
        },
      },
      {
        path: "design-form",
        component: () => import("@/views/components/forms/design-form.vue"),
        name: "designForm",
        meta: {
          title: "设计表单",
          root: true,
        },
      },
      {
        path: "questionnaire-design-form",
        component: () =>
          import("@/views/components/forms/questionnaire-design-form.vue"),
        name: "questionnaireDesignForm",
        meta: {
          title: "问卷表单设计",
          root: true,
        },
      },
    ],
  },
  {
    path: "tables",
    name: "tables",
    redirect: "/tables",
    meta: {
      title: "表格页",
      icon: "icon_missionary_work",
    },
    component: shallowRef(RouterTransition),
    children: [
      {
        path: "tables",
        component: () => import("@/views/components/tables/dynamic-table.vue"),
        name: "dynamicTable",
        meta: {
          title: "基础表格",
          root: true,
        },
      },
      {
        path: "virtualized-table",
        component: () =>
          import("@/views/components/tables/virtualized-table.vue"),
        name: "virtualizedTable",
        meta: {
          title: "虚拟化表格",
          root: true,
        },
      },
    ],
  },
  {
    path: "layouts",
    name: "layouts",
    redirect: "/layouts",
    meta: {
      title: "布局",
      icon: "icon_missionary_work",
    },
    component: shallowRef(RouterTransition),
    children: [
      {
        path: "big-screen",
        component: () => import("@/views/components/layouts/big-screen.vue"),
        name: "bigScreen",
        meta: {
          title: "大屏",
          root: true,
        },
      },
      {
        path: "detail-container",
        component: () =>
          import("@/views/components/layouts/detail-container.vue"),
        name: "detailContainer",
        meta: {
          title: "详情容器",
          root: true,
        },
      },
    ],
  },
];

export default {
  path: "/",
  name: "Layout",
  component: () => import("@/components/layout/index.vue"),
  redirect: "/components",
  children: asyncRoutes,
};
